<template>
  <div class="hello">
    <!-- 1 -->
    <!-- <div>
      <input type="text" v-model="value" @input="inputCheck()">
      <div v-if="value.length>0" @click="clearsearch()" ref="search">
      </div>
      <div v-for="item in submitSearch(cabinet)">
          <span>{{item.name}}</span>
      </div>
    </div> -->
   <!-- 2 -->
    <form  action="">
      <input v-model="input" placeholder="请输入内容" ref="search" ></input>
    </form>
    <div>
        <div v-for="item in queryDate(cabinet)">
          <span>{{item.name}}</span>
        </div>
    </div>
    <div @click="submitQuery">搜索</div>
  </div>
</template> 

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      value:'',
      setTimeout:null,
      cabinet:[
        {name:'红烧肉',num:'10'},
        {name:'火锅',num:'3'},
        {name:'开水',num:'3'},
        {name:'书本',num:'3'},
        {name:'爬山',num:'3'},
        {name:'游泳',num:'3'}
      ],
      input:null,
      query:null,
    }
  },
  methods:{
    // 11111111111111111111111111111111111
    // input事件
    inputCheck(){
      clearTimeout(this.setTimeout) //取消定时器
      this.setTimeout = setTimeout(()=>{
        this.submitSearch() //搜索
      },500)
    },
    submitSearch(list){
      console.log('搜索');
    },
    clearsearch(){
      clearTimeout(this.setTimeout)//取消定时器
      this.value = '';
      this.submitSearch() //搜索
    },
    // 2222222222222222222222222222222222
    submitQuery:function(){  
      this.query = this.$refs.search.value.trim();  
      console.log(this.query)
    },  
    queryDate:function(list){  
     if (this.query === '') {  
         return list  
     }   
     return list.filter((item)=>{  
         if(item.name.indexOf(this.query) != -1){  
            return item;  
          }  
     })  
    }, 

  },
}
</script>
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
